<template>
  <Card>
    <p slot="title">消防设施安全等级分布</p>
    <div class="chart" id="chart-institute-safe"></div>
    <Divider />
    <span class="text">低安全等级以下：{{count}}个</span>
    <Spin v-show="loading" fix size="large"></Spin>
  </Card>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      option: null,
      loading: false,
      count: 0,
      legend:['高安全等级','中上安全等级','中安全等级','低安全等级','危险等级']
    };
  },
  methods: {
    renderChart() {
      this.loading = true;

      this.option = {
        tooltip: {
          show: true,
          trigger: "item",
          axisPointer: { type: "shadow" }
        },
        legend: {
          top: "top",
          left: "left",
          data: this.legend
        },
        color: this.COLORS,
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["50%", "75%"],
            data: this.legend.map(o=>{
                return {name:o,value:0}
            }),
            itemStyle: {
              normal: {
                shadowColor: "#00000020",
                shadowBlur: 12,
                shadowOffsetX: 0,
                shadowOffsetY: 5
              }
            },
            label: {
              show: true,
              position: "outside",
              formatter: "{b}:\n{c}个"
            }
          }
        ]
      };
      this.$Crender("chart-institute-safe", this.option);
      this.loading = false;
    }
  },
  mounted() {
    this.renderChart();
  }
};
</script>

<style scoped>
.chart {
  height: 410px;
}
</style>